<template>
	<m-layout title="我的代金券">
		<m-tabs class="m-tabs" v-model="tabIdx" lineHeight="5rpx" height="60rpx" fontSize="30rpx" :tabs="tabList"
			color="#333" slot="header" activeColor="var(--theme)" pillsColor="var(--theme)" lineColor="var(--theme)"
			pillsBorderRadius="3rpx" @change="reset" />
		<template v-for="(item,index) in listArr">
			<view :key="item.id" class="card-box flex-between"
				:class="['cardtype'+item.cardType,item.state>1?'gray':'']" @click="setCard(item)">
				<view class="left flex flex-column">
					<view class="content flex-center">
						<m-number cny :value="item.amt" size="70 34"  color="#fff" weight="bold"></m-number>
					</view>
					<view class="title flex-center">
						无金额门槛
					</view>
				</view>
				<view class="center flex-1">
					<view class="flex-between">
						<view class="">
							<view class="flex-between">
								<m-text block ftsize="30" weight="600">VIP会员开通红包</m-text>
							</view>
							<template v-if="item.state == 1">
								<m-text gap="16 0" block ftsize="24" color="#666">
									{{item.ctime | times([0,16])}} 至 {{item.etime | times([0,16])}}</m-text>
							</template>
							<template v-if="[2,3,4].indexOf(item.state) != -1">
								<m-text gap="16 0" block ftsize="24" color="#666">
									{{statusTip[item.state]}}：{{item.utime | times([0,16])}}</m-text>
							</template>
						</view>
						<view class="right-btn">
							<template v-if="item.state == 2">
								<m-icon type="ysy" wh="100"></m-icon>
							</template>
							<template v-if="item.state >2 ">
								<m-icon type="ygq" wh="100"></m-icon>
							</template>
						</view>
					</view>

					<m-line type="dashed" color="#EBEBEB"></m-line>
					<m-block spa="10 0 0" gap="0 0 10" className="">
						<view class="flex-between">
							<m-text block ftsize="24" color='#666'>全产品通用</m-text>
						<!-- 	<template v-if="item.state == 1 && !type">
								<m-button @click="Jump({url:'/pages/nearby/nearby',mode:4})" gap="8 15" radius="10"
									color="#fff" :bgColor="item.cardType == 1?'var(--theme)':'#ce9d00 '">立即使用</m-button>
							</template>
							 -->
							<!-- <view v-if="item.state == 1 && config513 == 1" @click="cardId = item.token;isShow = true">
								<m-icon type="icon-duihuan" wh="34" color="#666"></m-icon>
								<text class="zhuanzeng">转赠</text>
								
							</view> -->
						</view>

					</m-block>
				</view>
			</view>
		</template>
		<m-loading :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />


		<!-- <view class="recode align-center" @click="Jump('/pagesA/coupon/recode/recode?type='+cardType)">
			<m-text color="$666" ftsize="28">查看体验券转赠记录</m-text>
			<m-icon type="icon-qianjin" wh="30" spa="0 0 0 10"></m-icon>
		</view> -->
		<m-pay v-model="isShow" :loading="transLoading" showCancel title="确认转赠" @handleConfirm="Transfer">
			<m-block gap="20 24" bgColor="usnet">
				<m-input placeholder="请输入被赠送人手机号" v-model="transferPhone"></m-input>
			</m-block>

		</m-pay>
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import { coupons, couponTotal } from '@/api/Order.js'
	export default {
		data() {
			return {
				cardType: 1,
				tabIdx: 1,

				statusTip: {
					2: "使用时间",
					3: "失效时间",
					4: "过期时间",
				},
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,

				isShow: false,
				cardId: '',
				transLoading: false,
				transferPhone: '',
			};

		},
		computed: {
			...mapState({
				enum: state => state.general.enum,
				myownCount: state => state.temporary.myownCount,
			}),
			DevPayType() {
				return this.enum['DevPayType']
			},
			tabList() {
				try{
					console.log(this.myownCount)
					const { valid = 0, invalid = 0 } = this.myownCount
					return {
						1: `有效(${valid}张)`,
						2: `无效(${invalid}张)`,
					}
				}catch(e){
					
					return {
						1: `有效`,
						2: `无效`
					}
				}
				
			},
		},
		onLoad({ cardType, type }) {
			this.cardType = cardType || 1;
			this.type = type;
			this.reset()
		},
		methods: {
			async Transfer({ pwd }) {
				if (!this.transferPhone) {
					return this.Toast('请输入被赠送人手机号')
				}
				this.transLoading = true;
				const { success, msg } = await Transfer({
					CardType: this.cardType,
					token: this.cardId,
					touser: this.transferPhone,
					paypassword: pwd
				})
				this.transLoading = false;
				this.Toast(msg)
				if (success) {
					await this.reset();
					this.isShow = false;
					this.transferPhone = '';
				}
			},
			setCard(item) {
				if (!this.type) return
				try {
					// 获取所有页面栈实例列表
					let pages = getCurrentPages();
					// 上一页页面实例
					let prevPage = pages[pages.length - 2];
					// 修改上一页data里面的card_token
					console.log('item.id')
					prevPage.$vm.couponid = item.id;
					this.Jump()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				couponTotal()
				this.getData();
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { list, pageCount } = await coupons({
					state:Number( this.tabIdx),
					PageIndex: this.pageIndex,
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	/deep/ .m-tabs {
		.v-tabs__container {
			display: flex;
			justify-content: space-around;
		}
	}

	.card-box {
		border-radius: 8rpx;
		overflow: hidden;
		margin-bottom: 15rpx;
		height: 186rpx;
		background: #fff ;
		.left {
			width: 186rpx;
			height: 186rpx;
			background: #5CBBF7 ;
			border-radius: 15rpx;
			.content {
				flex: 1;
			}

			.title {
				position: relative;
				width: 186rpx;
				height: 62rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				border-top: 1rpx dashed #fff;
				&::after {
					display: block;
					content: "";
					position: absolute;
					left: -15rpx;
					top: -15rpx;
					width: 25rpx;
					height: 25rpx;
					border-radius: 100%;
					background: #fff;
				}
				&::before {
					display: block;
					content: "";
					position: absolute;
					right: -15rpx;
					top: -15rpx;
					width: 25rpx;
					height: 25rpx;
					border-radius: 100%;
					background: #fff;
				}
			}
		}
		
		.center {
			padding: 16rpx 14rpx 26rpx 16rpx;
			box-sizing: border-box;
			height: 186rpx;
			background: #FFFFFF;
		}
	}

	.cardtype1 {
		.left {
			background: #856BFF;

			.title {
				background: #7355FF;
			}
		}
	}

	.cardtype2 {
		.left {
			background: linear-gradient(128deg, #FEE9A6 0%, #FFD370 69%);

			.title {
				background: #FFC637;
				color: #ce9d00;
			}
		}
	}


	.recode {
		position: fixed;
		background: #fff;
		padding-top: 10rpx;
		padding-bottom: calc(var(--window-bottom) + 45rpx);
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.zhuanzeng {
		font-size: 26rpx;
		color: #666;
		padding-left: 5rpx;
	}
</style>